@import "./color";

$thumbnail-w: calc(29% - 72*0.29px - 10*0.29px);


.taskBoard {
    display: flex;
    flex-direction: row;
    background-color: white;
    // border-bottom: 5px solid $color-div-line-light;
    // border-bottom: 5px solid #f8f8f8;
    margin-bottom: 5px;

    .contentLeft {
        padding-top: 35px;
        width: 80px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
    }
    .taskIcon {
        width: 50px;
        height: 50px;
        border-radius: 5px;
    }
    .taskNameCtn {
        height: 42px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center; 
    }
    .taskName {
        display: block;
        font-size: 9pt;
        line-height: 11px;

        color: $color-text-secondary;
        font-weight: bold;
    }

    .contentRight {
        padding-top: 12px;
        padding-left: 10px;
        margin-right: 10px;
        flex-direction: column;
        // width: platform.WIDTH - 72;
    }

    .userCtn {
        display: flex;
        flex-direction: row;
        align-items: center;
        height: 42px;
        margin-bottom: 7px;
    }
    .avatar {
        width: 30px;
        height: 30px;
        border-radius: 15px;
    }

    .userDescCtn {
        display: flex;
        width: calc(750rpx - 140px - 50px);
        padding-left: 10px;
        height: 34px;
        flex-direction: column;
        align-content: center;
        justify-content: center;
    }
    .nameCtn {
        padding-top: 3px;
        display: flex;
        width: calc(750rpx - 164px);
        flex-direction: row;
        align-items: center;
        // justify-content: space-between;
    }
    .name {
        font-size: 13px;
        line-height: 13px;
        color: $color-text-primary-light;
    }
    .gender {
        margin-left: 3px;
        // padding-top: 2px;
        font-size: 13px;
        line-height: 13px;
    }
 
    .collectCtn {
        width: 50px;
        // margin-top: 8px;
        // position: absolute;
        padding-right: 5px;
        text-align: right;
        right: 0px; 
        width: 50px;
        height: 40px;
    }
    .collect {
        // position: absolute;
        // text-align: right;
        // right: 15px;
        // color: $color-collect;
        color: $color-div-line;
        font-size: 16pt;

        &.collected {
            color: $color-collect;
        }
    }

    .createdTime {
        // display: block;
        // position: absolute;
        right: 15px;
        // float: right;
        font-size: 7pt;
        width: 100;
        // text-align: right;
        color: $color-text-secondary;
        background-color: transparent;
        margin-top: 5px;
    }
    .rightMidCtn {
        // margin-right: 10;
        // border-top-width: 10px;
        // border-top-color: $color-div-line;
        border-top: 1px solid $color-div-line-light;

        //background-color: `pink`;

        .summary {
            display: block;
            padding-top: 10px;
            // paddingRight: 7;
            margin-bottom: 13px;
            font-size: 11pt;
            line-height: 16pt;
            width: calc(750rpx - 100px);
            // font-weight: 'bold';
            color: $color-text-primary;
            word-wrap: break-word;
            word-break: normal;
        }
    }
    

    .detailRowCtn {
        margin-top: 3px;
        display: flex;
        align-items: center;
    }

    .detailText {
        margin-left: 10px;
        font-size: 10pt;
        color: $color-text-secondary-light;
    }

    .detailIcon {
        font-size: 9pt;
        color: $color-text-thirdly-light;
    }

    .rewardTitle {
        font-size: 10pt;
        // margin-right: 10px;
        color: $color-text-secondary;

    }
    .rewardIcon {
        // margin-right: 8px;
        height: 18px;
        width: 18px;
    }
    .rewardContent {
        font-size: 10pt;
        // color: '#f78058';
        color: $color-theme;
        // width: calc(750rpx - 140px);

        // color: $color-text-primary;
        // font-weight: bold;
        &.rmbText {
            // background-color: #f9e5e8;
            // line-height: 10pt;
            // padding: 3px 5px;
            // border-radius: 2px;
            // color: white;
            // letter-spacing:1px;

            // color: #f2c300;
        }
        &.rmbTag {
            letter-spacing:3px;
        }
    }

    .thumbnailImage {
        margin-right: 5px;
        width: $thumbnail-w;
        height: $thumbnail-w;
    }

    .rightBottomCtn {
        margin-top: 10px;
        margin-bottom: 3px;
        height: 45px;
        display: flex;
        // border-width-top: 0.5;
        // border-top-color: $color-div-line_LIGHT;
        flex-direction: row;
        align-items: center;
    }
    .rightBottomItemCtn {
        flex: 6;
        height: 28px;
        display: flex;
        flex-direction: row;
        align-items: center;
        // justify-content: 'flex-start';
        justify-content: center;
        background-color: $color-scene-bg-light;
        // background-color: white;
        border: none;
        border-radius: 3px;
        margin-right: 6px;
        
        // justify-content: 'center';
    }
    .buttonTextIcon {
        font-size: 8pt;
        margin-right: 3pt;
    }
    .buttonItemText {
        font-size: 8pt;
    }
    .buttonItemTextAccept {
        font-size: 10pt;
        font-weight: bold;
    }

    .buttonCtn {
        flex: 8;
        height: 28px;
        display: flex;
        background-color: $color-theme;
        border-radius: 3px;
        align-items: center;
        justify-content: center;
        &.self {
            background-color: $color-scene-bg-light;
        }
        &.blank {
            opacity: 0;
        }
    }
    .myTaskButtonCtn {
        flex: 4;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        background-color: $color-scene-bg-light;
        border-radius: 3px;
        height: 28px;
    }
    .button {
        flex: 1;
        // width: 70;
        height: 28px;
        border-radius: 5px;
        align-items: center;
        justify-content: center;
        background-color: $color-theme;
    }
    .buttonText {
        color: 'white';
        font-size: 12pt;
    }
    .myTaskText {
        font-size: 11pt;
        color: $color-text-thirdly;
    }

    .finishBottomCtn {
        height: 35px;
        display: flex;
        justify-content: flex-end;
    }
    // .finishBottom {
    //     left: -90px;
    //     position: 'absolute';
    //     height: 30px;
    //     background-color: $color-scene-bg-light;
    //     // background-color: 'white';
    //     align-items: center;
    //     justify-content: center;
    // }
    .finishIcon {
        position: relative;
        top: -30px;
        width: calc(360px * 6 / 32);
        height: calc(360px * 6 / 32);
        opacity: 0.35;
    }

    .shareBtn {
        // background: black,
        span {
            font-size: 8pt;
            color: $color-text-thirdly;
        }
    }

}